<template>
  <div class="app-container">
    <search-header
      :input-array="inputArray"
      :select-array="selectArray"
      @search="search"
    />
    <el-row class="tab-change" style="margin:20px 0px">

      <el-button @click="gettruckDrivers()">全部
        <span>
          <!--  -->
          <!-- {{ total }} -->
          85
        </span></el-button>
      <el-button v-for="(item,index) in transport" :key="index" @click="searchCount(item.value)">
        <!-- <span>待提货{{ transportNum[1] }}</span> -->
        {{ item.label }}
        <span>{{ transportNum[item.value] }}</span>
      </el-button>

    </el-row>
    <el-row>
      <!-- 常用功能 -->
      <el-col>
        <el-card>
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <!-- index设置表单的序号 -->
              <el-table-column type="index" prop="serial-number" label="序号" width="50" />
              <!-- prop="shipping-number" -->
              <el-table-column
                prop="id"
                label="运输任务编号"
                width="200"
              />
              <el-table-column prop="truck.licensePlate" label="车牌号码" width="120" />
              <el-table-column
                prop="startAgency.name"
                label="起始地"
                width="120"
              />
              <el-table-column prop="endAgency.name" label="目的地" width="120" />

              <el-table-column prop="status" label="运输任务状态" width="120">
                <template v-slot="{row}">
                  <span>
                    <!-- 减一是因为索引从0开始 还要判定数据没有的情况-->
                    {{ transport[row.status-1] && transport[row.status-1].label }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="loadingStatus" label="车俩装载状态" width="120">

                <template v-slot="{row}">
                  <span>

                    {{ carObj[row.loadingStatus] }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="assignedStatus" label="任务分配状态" width="120">
                <template v-slot="{row}">
                  <span>
                    {{ taskObj[row.assignedStatus] }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column prop="planDepartureTime" label="计划发车时间" width="200" />
              <el-table-column prop="actualDepartureTime" label="实际发车时间" width="200" />
              <el-table-column prop="updated" label="更新时间" width="200" />
              <!-- fixed设置表单表格固定位置 -->
              <el-table-column fixed="right" label="操作" width="150">

                <template slot-scope="scope">
                  <el-button type="text" size="small" style="color: #409eff;" @click="handleClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small">取消</el-button>
                  <el-button type="text" size="small" style="color: #409eff;">手动调整</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-row style="height: 60px" align="middle" type="flex" justify="end">
        <el-pagination
          layout="total,sizes,prev, pager, next"
          :background="true"
          :total="total"
          :page-size="queryObj.pagesize"
          :page-sizes="[ 5 , 8, 10, 15]"
          :current-page="queryObj.page"
          @current-change="currentChange"
          @size-change="handleSizeChange"
        />
      </el-row>

    </el-row>
  </div>
</template>

<script>
import SearchHeader from '@/components/SearchHeader'
import { getTableTransportNum, getTableTransportTask } from '@/api/TransportTask'
export default {
  name: 'TransportTask',
  components: {
    SearchHeader
  },
  data() {
    return {
      // 根据后端数据定义的
      transport: [
        { value: 1, label: '待提货' },
        { value: 2, label: '进行中' },
        // { value: 3, label: '无' },
        { value: 4, label: '已完成' },
        { value: 5, label: '已取消' }
      ],
      // 获取数量
      transportNum: {
        1: '',
        2: '',
        3: '',
        4: '',
        5: ''
      },

      carObj: {
        1: '半载',
        2: '满载',
        3: '空载'

      },
      taskObj: {
        2: '已分配',
        3: '待人工分配'
      },
      inputArray: [
        {
          label: '任务编号',
          key: 'id1',
          placeholder: '输入任务编号'

        },
        {
          label: '车牌号码',
          key: 'id2',
          placeholder: '输入车牌号码'

        }
      ],
      selectArray: [
        {
          label: '任务分配状态',
          key: 'status',
          placeholder: '请选择',
          data: [
            { value: 1, label: '已分配 ' },
            { value: 2, label: '待人工分配 ' }
          ]
        },
        {
          label: '满载状态',
          key: 'se2',
          placeholder: '请选择',
          data: [
            { value: 1, label: '满载 ' },
            { value: 2, label: '空载 ' }
          ]
        },
        {
          label: '起始地机构',
          key: 'se3',
          placeholder: '请选择起始地机构',
          data: [
            { value: 1, label: '东北转运中心 ' },
            { value: 2, label: '华北转运中心 ' },
            { value: 3, label: '华中转运中心 ' },
            { value: 4, label: '华东转运中心 ' },
            { value: 5, label: '西南转运中心 ' },
            { value: 6, label: '金牛转运中心 ' },
            { value: 7, label: '西北转运中心 ' }
          ]
        },
        {
          label: '目的地机构',
          key: 'se4',
          placeholder: '请选择起始地机构',
          data: [
            { value: 1, label: '东北转运中心 ' },
            { value: 2, label: '华北转运中心 ' },
            { value: 3, label: '华中转运中心 ' },
            { value: 4, label: '华东转运中心 ' },
            { value: 5, label: '西南转运中心 ' },
            { value: 6, label: '金牛转运中心 ' },
            { value: 7, label: '西北转运中心 ' }
          ]
        }
      ],
      tableData: [

      ],
      shippingNumber: '',

      total: 0,
      queryObj: {
        assignedStatus: '',
        endAgencyId: '',
        id: '',
        licensePlate: '',
        loadingStatus: '',
        page: 1,
        pageSize: 10,
        planArrivalTime: '',
        startAgencyId: '',
        status: '',
        truckId: ''
      }
    }
  },
  created() {
    this.gettruckDrivers()
    this.getCount()
  },
  methods: {
    search(val) {
      console.log(val)
      this.queryObj.id = val.id1

      // console.log(this.queryObj)
      this.queryObj.licensePlate = val.id2

      val.se1 === 1 ? this.queryObj.assignedStatus = 2 : this.queryObj.assignedStatus = 3
      this.queryObj.loadingStatus = val.se2
      this.queryObj.startAgencyId = val.se3
      this.queryObj.endAgencyId = val.se4
      // 单位时间内只执行最后一次

      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.queryObj.page = 1
        this.gettruckDrivers()
      }, 300)
    },
    searchCount(e) {
      console.log(e)
      // if () {
      //   this.transport.status === this.transportNum[k]
      // }
      // for (const key in this.transportNum) {
      //   if (this.transport.status === this.transportNum[key]) {
      //     // const element = object[key];
      this.queryObj.status = e
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.queryObj.page = 1
        this.gettruckDrivers()
      }, 200)
      // }
      // }
      // console.log(e)
      // this.
      // clearTimeout(this.timer)
      // this.timer = setTimeout(() => {
      //   this.queryObj.page = 1
      //   this.gettruckDrivers()
      // }, 300)
    },
    currentChange(page) {
      this.queryObj.page = page
      this.gettruckDrivers()
    },
    handleSizeChange(val) {
      console.log(val)
      this.queryObj.pageSize = val
      this.queryObj.page = 1
      this.gettruckDrivers()
    },
    async getCount() {
      const res = await getTableTransportNum()
      this.transportNum = res.data
    },
    async gettruckDrivers() {
      const res = await getTableTransportTask(this.queryObj)
      this.tableData = res.data.items
      this.total = +res.data.counts
      // this.shippingNumber = res.data.id
      // const res1 = await getTransportTaskCar(this.shippingNumber)
      // const res = await getTransportTaskTips()
      console.log(this.tableData)
      // console.log(this.shippingNumber)
      // console.log(res)
      // this.tableData = res1.data
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
    background-color: #f3f4f7;
    padding-top: 0px;

    .tab-change{
      padding: 0 !important;
      background-color: #fff;

      .el-button{
        width: 120px;
        height: 50px;
        border: none;
        border-radius: 0;
        margin: 0; }

    }
.el-row{
  margin-bottom: 10px;
}
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .el-col {
    border-radius: 4px;
  .search{
    margin-left: 50px;
  }
  }
}
</style>
